<template>
  <view class="third-page-short-video">
    <!-- 顶部自定义导航 -->
    <!-- <tn-nav-bar fixed>短视频</tn-nav-bar> -->
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>
        
    <!-- 页面内容 -->
    <view>
      <!--  -->
      <!-- <view class="container" :style="{height: containerHeight + 'px'}"> -->
      <!-- <view class="container" :style="showCommentModal==true? 'height: 60vh;':'height: 100vh'"> -->
      <view class="container" :class="showCommentModal==true?'tn-height-cur':'tn-height'">
        <tn-custom-swiper
          class="swiper"
          :current="current"
          :duration="250"
          :circular="!loadingFirst"
          :vertical="true"
          @change="handleSwiperChange"
        >
          <block v-for="(item, index) in swiperList" :key="index">
            <tn-custom-swiper-item class="swiper__item">
              <view class="item__container">
                
                <!--objectFit="" contain包含，fill填充，cover覆盖 -->
                <!-- 东东温馨提醒，根据需要选择模式 -->
                
                <!-- #ifndef APP-PLUS -->
                <!-- 除了App，其他平台下出现在的代码 -->
                <video
                  v-if="item.loading"
                  class="item__video"
                  :id="`video-${index}`"
                  :src="item.src"
                  objectFit="cover"
                  :autoplay="false"
                  :loop="true"
                  :controls="false"
                  :show-progress="false"
                  :show-fullscreen-btn="false"
                  :show-center-play-btn="true"
                  :show-loading="false"
                  @error="handleVideoError($event, index)"
                  @loadedmetadata="handleVideoLoadedmetadata($event, index)"
                ></video>
                <!-- #endif-->
                
                <!-- 为什么不直接写在这个页面，而是用modal？因为直接写在这个页面，在部分机型，会有滑动频闪-->
                <!-- #ifdef APP-PLUS -->
                <!-- 仅出现在 App 平台下的代码 -->
                <video-modal></video-modal>
                <!-- #endif-->
                
                <block v-if="current === index">
                  <view class="item__content">
                    <view class="author-name">@ {{item.author.name}}</view>
                    <view class="desc">{{item.desc}}</view>
                  </view>
                  
                  <view class="item__operation">
                    <view class="avatar">
                      <image class="image" :src="item.author.avatar" mode="aspectFill"></image>
                    </view>
                    <view class="options like" @tap="clickLike(index)">
                      <view class="icon" :class="[item.like.flag ? 'icon__select-like tn-icon-like-fill' : 'tn-icon-like-fill']"></view>
                      <view class="text">{{item.like.count}}</view>
                    </view>
                    <view class="options message" @tap.stop="openCommentModal">
                      <view class="icon tn-icon-message-fill"></view>
                      <view class="text">{{item.message}}</view>
                    </view>
                    <view class="options star" @tap="clickStar(index)">
                      <view class="icon" :class="[item.star.flag ? 'icon__select-star tn-icon-star-fill' : 'tn-icon-star-fill']"></view>
                      <view class="text">{{item.star.count}}</view>
                    </view>
                    <button class="options share tn-button--clear-style" open-type="share">
                      <view class="icon tn-icon-send-fill"></view>
                      <view class="text">{{item.share}}</view>
                    </button>
                    <!-- <view class="options share">
                      <view class="icon tn-icon-send-fill"></view>
                      <view class="text">{{item.share}}</view>
                    </view> -->
                  </view>
                  
                  <!-- 勿删，在app端为了实现滑动，即有用的css -->
                  <!-- #ifdef APP-PLUS -->
                  <!-- 仅出现在 App 平台下的代码 -->
                  <view class="item__slide">
                  </view>
                  <!-- #endif-->
                  
                  <!-- 悬浮按钮-->
                  <view class="edit tnxuanfu" @tap.stop="openProductModal">
                    <view class="bg0 pa">
                      <view class="bg1">
                        <image src="https://resource.tuniaokj.com/images/my/my6.png" class="button-shop shadow"></image>
                      </view>
                    </view>
                    <view class="hx-box pa">
                      <view class="pr">
                        <view class="hx-k1 pa0">
                          <view class="span"></view>
                        </view>
                        <view class="hx-k2 pa0">
                          <view class="span"></view>
                        </view>
                        <view class="hx-k3 pa0">
                          <view class="span"></view>
                        </view>
                        <view class="hx-k4 pa0">
                          <view class="span"></view>
                        </view>
                        <view class="hx-k5 pa0">
                          <view class="span"></view>
                        </view>
                        <view class="hx-k6 pa0">
                          <view class="span"></view>
                        </view>
                      </view>
                    </view>
                  </view>
                  
                </block>
                
              </view>
            </tn-custom-swiper-item>
          </block>
        </tn-custom-swiper>
      </view>
      
      <!-- 产品弹框 -->
      <!-- popup会有延迟，采用这种方式来优化弹窗的优化体验-->
      <product-modal v-model="showProductModal"></product-modal>
      
      <!-- 评论弹框 -->
      <!-- popup会有延迟，采用这种方式来优化弹窗的优化体验-->
      <comment-modal v-model="showCommentModal"></comment-modal>
        
    </view>
    
  </view>
</template>

<script>
  import VideoModal from '@/thirdPage/short-video/video.vue'
  import ProductModal from '@/thirdPage/short-video/product.vue'
  import CommentModal from '@/thirdPage/short-video/comment.vue'
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    components: { VideoModal , ProductModal , CommentModal },
    name: 'ThirdPageShortVideo',
    mixins: [template_page_mixin],
    data() {
      return {
        containerHeight: 0,
        current: 0,
        videoSrc: ['https://videos.pexels.com/video-files/3320517/3320517-uhd_1440_2560_25fps.mp4','https://videos.pexels.com/video-files/14702977/14702977-uhd_1440_2560_60fps.mp4','https://videos.pexels.com/video-files/7505763/7505763-uhd_1440_2560_30fps.mp4','https://videos.pexels.com/video-files/8207387/8207387-hd_1066_1920_25fps.mp4','https://videos.pexels.com/video-files/6525522/6525522-hd_1080_1920_30fps.mp4','https://videos.pexels.com/video-files/7957238/7957238-uhd_1440_2560_30fps.mp4','https://videos.pexels.com/video-files/6691596/6691596-uhd_1440_2560_24fps.mp4','https://videos.pexels.com/video-files/7710420/uhd_25fps.mp4'],
        h5FirstPlay: true,
        loadingFirst: true,
        swiperList: [
          {
            author: {
              name: '抓住那只猪',
              avatar: 'https://resource.tuniaokj.com/images/avatar/xiong/x5.jpg'
            },
            desc: '图鸟在这里，和你一起共同成长，基于图鸟UI开发的第三方插件，图鸟加油；与图鸟一起成长，也是一件很刺激的事情...',
            like: {
              flag: true,
              count: '12.9W'
            },
            message: '1.6K',
            star: {
              flag: false,
              count: '3.2K'
            },
            share: '4.6K',
            loading: false,
            src: ''
          },
          {
            author: {
              name: '不许凶我吖',
              avatar: 'https://resource.tuniaokj.com/images/avatar/xiong/x15.jpg'
            },
            desc: '晚风轻踩着云朵，月亮在贩售快乐，你从银河背后靠近我，我与星辉一同为你沉沦。。',
            like: {
              flag: false,
              count: '12.9W'
            },
            message: '1.6K',
            star: {
              flag: false,
              count: '3.2K'
            },
            share: '4.6K',
            loading: false,
            src: ''
          },
          {
            author: {
              name: '小泡泡',
              avatar: 'https://resource.tuniaokj.com/images/avatar/xiong/x6.jpg'
            },
            desc: '为什么我没能早点遇见你，',
            like: {
              flag: true,
              count: '283W'
            },
            message: '6.6W',
            star: {
              flag: true,
              count: '46W'
            },
            share: '18.6W',
            loading: false,
            src: ''
          },
          {
            author: {
              name: '可我会像',
              avatar: 'https://resource.tuniaokj.com/images/avatar/xiong/x10.jpg'
            },
            desc: '我不喜欢带伞，因为雨水从不滴落在我的心上；心若向阳，无惧远方。。',
            like: {
              flag: false,
              count: '556'
            },
            message: '148',
            star: {
              flag: true,
              count: '168'
            },
            share: '172',
            loading: false,
            src: ''
          },
          {
            author: {
              name: '你的名字',
              avatar: 'https://resource.tuniaokj.com/images/avatar/xiong/x2.jpg'
            },
            desc: '生活需要一些仪式感，这跟矫情无关，有些记忆会被时间焚烧',
            like: {
              flag: true,
              count: '9.4W'
            },
            message: '262',
            star: {
              flag: false,
              count: '4.6K'
            },
            share: '3.9K',
            loading: false,
            src: ''
          },
          {
            author: {
              name: 'Jaylen',
              avatar: 'https://resource.tuniaokj.com/images/avatar/xiong/x12.jpg'
            },
            desc: '感谢你，带给我一年四季的陪伴与支持',
            like: {
              flag: true,
              count: '986'
            },
            message: '82',
            star: {
              flag: false,
              count: '302'
            },
            share: '135',
            loading: false,
            src: ''
          },
          {
            author: {
              name: '可我会像',
              avatar: 'https://resource.tuniaokj.com/images/avatar/xiong/x10.jpg'
            },
            desc: '我不喜欢带伞，因为雨水从不滴落在我的心上；心若向阳，无惧远方。。',
            like: {
              flag: false,
              count: '556'
            },
            message: '148',
            star: {
              flag: true,
              count: '168'
            },
            share: '172',
            loading: false,
            src: ''
          },
          {
            author: {
              name: '你的名字',
              avatar: 'https://resource.tuniaokj.com/images/avatar/xiong/x2.jpg'
            },
            desc: '生活需要一些仪式感，这跟矫情无关，有些记忆会被时间焚烧',
            like: {
              flag: true,
              count: '9.4W'
            },
            message: '262',
            star: {
              flag: false,
              count: '4.6K'
            },
            share: '3.9K',
            loading: false,
            src: ''
          },
        ],
        // 存放当前缓冲视频是否加载成功
        loadingVideoFlag: [],
        
        /* 产品弹窗*/
        showProductModal: false,
        /* 评论弹窗*/
        showCommentModal: false,
      }
    },
    computed: {
      listLength() {
        return this.swiperList.length
      }
    },
    onLoad() {
      this.getContainerHeight()
      this.initData()
    },
    onReady() {
      this.$nextTick(() => {
        this.loadVideo()
      })
    },
    methods: {
      // 点击喜欢按钮
      clickLike(index) {
        let item = this.swiperList[index]
        item.like.flag = !item.like.flag
        this.$set(this.swiperList, index, item)
      },
      // 点击收藏按钮
      clickStar(index) {
        let item = this.swiperList[index]
        item.star.flag = !item.star.flag
        this.$set(this.swiperList, index, item)
      },
      // 获取可用区域的高度
      getContainerHeight() {
        const systemInfo = uni.getSystemInfoSync()
        this.containerHeight = systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo.statusBarHeight
      },
      // 初始化数据
      initData() {
        this.loadingVideoFlag = Array(this.listLength).fill(false)
      },
      // 加载以当前current为基准的的前后各一个视频
      loadVideo() {
        // 获取当前轮播的index
        const index = this.current
        let prevIndex = index - 1 < 0 ? this.listLength - 1 : index - 1
        let nextIndex = index + 1 > this.listLength - 1 ? 0 : index + 1
        let currentItem = this.swiperList[index]
        let prevItem = this.swiperList[prevIndex]
        let nextItem = this.swiperList[nextIndex]
        
        if (!currentItem.loading) {
          currentItem.src = this.videoSrc[this.$tn.number.randomInt(0, 8)]
          currentItem.loading = true
          this.$set(this.swiperList, index, currentItem)
        }
        if (!prevItem.loading) {
          prevItem.src = this.videoSrc[this.$t.number.randomInt(0, 8)]
          prevItem.loading = true
          this.$set(this.swiperList, prevIndex, prevItem)
        }
        if (!nextItem.loading) {
          nextItem.src = this.videoSrc[this.$tn.number.randomInt(0, 8)]
          nextItem.loading = true
          this.$set(this.swiperList, nextIndex, nextItem)
        }
        
        // 如果为非当前和前后的item，则进行重置
        for (let i = 0; i < this.listLength; i++) {
          if (![index, prevIndex, nextIndex].includes(i)) {
            let tempItem = this.swiperList[i]
            tempItem.loading = false
            tempItem.src = ''
            this.$set(this.swiperList, i, tempItem)
            // 重置视频加载标记位
            this.loadingVideoFlag[i] = false
          }
        }
        
        // 开始播放当前视频
        this.playCurrentVideo()
      },
      // 开始播放当前视频
      playCurrentVideo() {
        // 获取当前轮播的index
        const index = this.current
        // 开始播放当前的视频，并且停止其他视频
        setTimeout(() => {
          if (!this.loadingVideoFlag[index]) {
            this.$tn.message.toast('失败视频-演示')
            return
          }
        }, 2800)
        for (let i = 0; i < this.listLength; i++) {
          const videoContext = uni.createVideoContext(`video-${i}`, this)
          if (i === index) {
            // #ifdef H5
            if (!this.h5FirstPlay) {
              videoContext.play()
            }
            // #endif
            // #ifndef H5
            videoContext.play()
            // #endif
            
          } else {
            // #ifdef MP-WEIXIN
            videoContext.stop()
            // #endif
            // #ifndef MP-WEIXIN
            videoContext.pause()
            // #endif
          }
        }
      },
      // 处理轮播的切换
      handleSwiperChange(e) {
        // console.log(e);
        this.current = e.current
        this.loadVideo()
        // #ifdef H5
        if (this.h5FirstPlay) {
          this.h5FirstPlay = false
        }
        // #endif
        
        // 当滑动到第3个并且是第一次滑动到该位置
        if (this.loadingFirst && e.current === 2) {
          this.loadingFirst = false
        }
      },
      // 视频出现元数据时触发
      handleVideoLoadedmetadata(e, index) {
        // console.log(index, e);
        if (!this.loadingVideoFlag[index] && this.current === index) {
          console.log('loadmetadata');
          // #ifdef H5
          if (!this.h5FirstPlay) {
            const videoContext = uni.createVideoContext(`video-${index}`, this)
            videoContext.play()
          }
          // #endif
          // #ifndef H5
          const videoContext = uni.createVideoContext(`video-${index}`, this)
          videoContext.play()
          // #endif
        }
        this.loadingVideoFlag[index] = true
      },
      // 视频加载失败时触发
      handleVideoError(e, index) {
        // console.log(index, e);
        this.loadingVideoFlag[index] = false
        if (index === this.current) {
          this.$tn.message.toast('加载失败-演示')
        }
      },
      
      
      // 打开产品弹框
      openProductModal() {
        this.showProductModal = true
      },
      // 打开评论弹框
      openCommentModal() {
        this.showCommentModal = true
      },
      
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
      
    }
  }
</script>

<style lang="scss" scoped>
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
    &:before {
      content: " ";
      width: 1rpx;
      height: 110%;
      position: absolute;
      top: 22.5%;
      left: 0;
      right: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      opacity: 0.7;
      background-color: #FFFFFF;
    }
  }
  
  .swiper {
    width: 100%;
    height: 100%;
    display: block;
    
    &__item {
      background-color: #000000;
      
      .item {
        &__container {
          position: absolute;
          width: 100%;
          height: 100%;
        }
        
        &__video {
          width: 100%;
          height: 100%;
        }
        
        &__content {
          z-index: 9999;
          width: 70%;
          color: #FFFFFF;
          position: absolute;
          bottom: 240rpx;
          bottom: calc(140rpx + env(safe-area-inset-bottom) / 2);
          bottom: calc(140rpx + constant(safe-area-inset-bottom));
          left: 30rpx;
          transition-duration: 0s;
          
          .author-name {
            font-size: 38rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
          }
          .desc {
            width: 100%;
            -webkit-line-clamp: 3;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        
        &__operation {
          z-index: 9999;
          color: #FFFFFF;
          position: absolute;
          right: 30rpx;
          bottom: 380rpx;
          bottom: calc(280rpx + env(safe-area-inset-bottom) / 2);
          bottom: calc(280rpx + constant(safe-area-inset-bottom));
          display: flex;
          flex-direction: column;
          align-items: center;
          transition-duration: 0s;
          
          .avatar {
            width: 90rpx;
            height: 90rpx;
            border-radius: 50%;
            overflow: hidden;
            border: 6rpx solid #FFFFFFE6;
            margin-bottom: 50rpx;
            
            .image {
              width: 100%;
              height: 100%;
            }
          }
          
          .icon {
            font-size: 70rpx;
            opacity: 0.96;
            
            &__select-like {
              color: #FC3D5C;
              animation: select-keyframes 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }
            &__select-star {
              color: #F7B432;
              animation: select-keyframes 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }
          }
          
          .options {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 40rpx;
            
            .text {
              padding-top: 6rpx;
              font-size: 24rpx;
            }
          }
        }
        
        /* 蒙层，用于APP端的*/
        &__slide{
          width: 100vw;
          height: 100vh;
          background-color: #00000000;
          bottom: 0;
          position: absolute;
          z-index: 999;
        }
        
      }
    }
  }
  
  @keyframes select-keyframes {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  
  /* 高度 */
  .tn-height{
    height: 100vh;
  }
  .tn-height-cur{
    animation: ddheight 0.25s linear;
    
    height: 40vh;
  }
  
  @keyframes ddheight {
    0% {
      height: 100vh;
    }
    100% {
      height: 40vh;
    }
  }
  
  /* 悬浮 */
  .tnxuanfu{
    animation: suspension 3s ease-in-out infinite;
  }
  
  @keyframes suspension {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-0.8rem);
    }
  }
  /* 悬浮按钮 */
  .button-shop {
    width: 90rpx;
    height: 90rpx;
    display: flex;
    flex-direction: row;
    position: fixed;
    /* bottom:200rpx;
      right: 20rpx; */
    left: 5rpx;
    top: 5rpx;
    z-index: 1001;
    border-radius: 100px;
    opacity: 0.9;
  }
  
  
  /* 按钮 */
  .edit {
    bottom: 220rpx;
    right: 75rpx;
    position: fixed;
    z-index: 9999;
  }
  
  
  .pa,
  .pa0 {
    position: absolute
  }
  
  .pa0 {
    left: 0;
    top: 0
  }
  
  
  .bg0 {
    width: 100rpx;
    height: 100rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .bg1 {
    width: 100%;
    height: 100%;
  }
  
  
  
  
  .hx-box {
    top: 50%;
    left: 50%;
    width: 100rpx;
    height: 100rpx;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
  }
  
  .hx-box .pr {
    width: 100rpx;
    height: 100rpx;
    transform-style: preserve-3d;
    animation: hxz 20s linear infinite;
  }
  
  @keyframes hxz {
    0% {
      transform: rotateX(0deg);
    }
  
    100% {
      transform: rotateX(-360deg);
    }
  }
  
  
  
  .hx-box .pr .pa0 {
    width: 100rpx;
    height: 100rpx;
    /* border: 4px solid #5ec0ff; */
    border-radius: 1000px;
  }
  
  .hx-box .pr .pa0 .span {
    display: block;
    width: 100%;
    height: 100%;
    background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc4.png) no-repeat center center;
    background-size: 100% 100%;
    animation: hx 4s linear infinite;
  }
  
  @keyframes hx {
    to {
      transform: rotate(360deg);
    }
  }
  
  .hx-k1 {
    transform: rotateX(-60deg) rotateZ(-60deg)
  }
  
  .hx-k2 {
    transform: rotateX(-30deg) rotateZ(-30deg)
  }
  
  .hx-k3 {
    transform: rotateX(0deg) rotateZ(0deg)
  }
  
  .hx-k4 {
    transform: rotateX(30deg) rotateZ(30deg)
  }
  
  .hx-k5 {
    transform: rotateX(60deg) rotateZ(60deg)
  }
  
  .hx-k6 {
    transform: rotateX(90deg) rotateZ(90deg)
  }
  
</style>
